<template>
    <div>
        <div id="g_nav" class="m-subnav m-subnav-up f-pr"></div>
        <div class="g-bd">
            <div class="g-wrap" id="baseBox">
                <div class="u-title u-title-2 f-cb">
                    <h3><span class="f-ff2">个人设置</span></h3>
                </div>
                <!-- <ul class="m-tabs f-cb">
                    <li class="fst"><a href="/user/update" class="z-slt"><em>基本设置</em></a></li>
                    <li><a href="/user/binding/#/list"><em>绑定设置</em></a></li>
                    <li><a href="/user/setting"><em>隐私设置</em></a></li>
                </ul> -->
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本设置" name="first"> <el-form ref="ruleFormRef" style="max-width: 600px"
                            :model="ruleForm" :rules="rules" label-width="auto">
                            <el-form-item label="头像:" prop="name">
                                <el-avatar :icon="UserFilled" />
                            </el-form-item>
                            <el-form-item label="昵称:" prop="name">
                                <el-input v-model="ruleForm.name" />
                            </el-form-item>
                            <el-form-item label="介绍:" prop="desc">
                                <el-input v-model="ruleForm.desc" type="textarea" />
                            </el-form-item>
                            <el-radio-group v-model="radio1">
                                <el-radio value="1" size="large">男</el-radio>
                                <el-radio value="2" size="large">女</el-radio>
                            </el-radio-group>
                            <el-form-item label="生日:" prop="desc" class="a">
                                <el-date-picker v-model="value2" type="dates" placeholder="Pick one or more dates" />
                            </el-form-item>
                            <el-form-item label="地区:" prop="desc" class="a">
                                <el-select v-model="value" placeholder="Select" style="width: 100px">
                                    <el-option v-for="item in optionss" :key="item.value" :label="item.label"
                                        :value="item.value" :disabled="item.disabled" />
                                </el-select>
                                <el-select v-model="value" placeholder="Select" style="width: 100px">
                                    <el-option v-for="item in optionss" :key="item.value" :label="item.label"
                                        :value="item.value" :disabled="item.disabled" />
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="submitForm(ruleFormRef)">
                                    保存
                                </el-button>
                            </el-form-item>
                        </el-form>


                    </el-tab-pane>
                    <el-tab-pane label="绑定设置" name="second">
                        <div class="topban f-cb"> <i class="logo u-mlg logo u-mlg-mb"></i>
                            <div class="tit tit-1"><span class="f-ff2 s-fc4">手机</span> <!-- 手机号 --><span
                                    class="tip s-fc3">使用手机注册：<em>+86 199****5783</em><a class="cg s-fc7" data-type="1"
                                        data-uid="199****5783" data-countrycode="86"
                                        data-action="change-phone">修改</a></span></div>
                        </div>
                        <div class="note s-fc3 f-fw1">绑定账号后，你可以分享音乐给那边的朋友们，还可以直接用其登录云音乐</div>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="隐私设置" name="third">
                        <div class="item">
                            <h3><span class="f-fs1">私信</span><span class="sub s-fc3">接收新私信提醒</span></h3>
                            <ul class="n-plist">
                                <li><label><input type="radio" class="f-rdi" name="shareSetting" value="0"
                                            data-action="shareSetting" checked="true"> 所有人</label></li>
                                <li><label><input type="radio" class="f-rdi" name="shareSetting" value="1"
                                            data-action="shareSetting"> 我关注的人</label></li>
                            </ul>
                        </div>
                    </el-tab-pane> -->
                </el-tabs>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

const value2 = ref('')
const radio1 = ref('1');
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
    name: string
    region: string

}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    region: '',

})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


const value = ref('')
const optionss = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
        disabled: true,
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
</script>

<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.m-subnav-up {
    height: 5px;
    border-bottom: none;
    box-sizing: border-box;
    background-color: #C20C0C;
    z-index: 90;
}

.g-bd {
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .g-wrap {
        padding: 40px;

        .u-title-2 {
            border-bottom: none;
            height: 40px;

            h3 {
                float: left;
                font-size: 24px;
                font-weight: normal;
                padding: 0;
                margin: 0;

                .f-ff2 {
                    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                }
            }
        }
    }
}


//绑定设置
.topban {
    height: 100px;
    margin-top: 40px;
    padding-top: 15px;
    background: #f8f8f8;
    border: 1px solid #dfdfdf;
    display: block;
    unicode-bidi: isolate;

    .logo {
        display: inline;
        float: left;
        margin: 7px 7px 0 38px;
        background-position: 0 -130px !important;
        width: 58px;
        height: 58px;
        vertical-align: middle;
        background: url(../assets/InfoUpdate/logo.png) no-repeat 0 9999px;

    }

    .tit-1 {
        margin-top: 14px;
        line-height: 23px;
        float: left;
        font-size: 16px;
        font-weight: normal;

        .f-ff2 {
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
            color: #999;
            line-height: 23px;
            font-size: 16px;
            font-weight: normal;
        }

        .tip {
            display: block;
            font-size: 12px;
            color: #666;
            line-height: 23px;
            font-weight: normal;
        }
    }

    i {
        font-style: normal;
        text-align: left;
        font-size: inherit;
    }
}

.note {
    height: 36px;
    margin-top: 27px;
    line-height: 36px;
    color: #666;
    font-weight: bold;
}

//隐私设置
.item {
    padding: 38px 0 25px;
    border-bottom: 1px dotted #ccc;

    h3 {
        height: 33px;
        font-size: 100%;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;

        .f-fs1 {
            font-size: 14px;
            font-weight: bold;
        }

        .sub {
            margin-left: 12px;
            font-weight: normal;
            color: #666;
            font-size: 100%;
        }
    }

    .n-plist {
        margin-left: 40px;
    }

    ul {
        padding: 0;
        margin: 0;
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        padding-inline-start: 40px;
        unicode-bidi: isolate;
    }

    li {
        height: 30px;
        display: list-item;
        text-align: -webkit-match-parent;
        unicode-bidi: isolate;
        padding: 0;
        margin: 0;
    }
}
</style>